<template>
  <div>
    <div class="wel__header">
      <div class="wel__info">
        <img src="/static/img/logo.png" alt="" class="wel__info-img">
        <div class="wel__info-content">
          <div class="wel__info-title" style="display:flex">
            北京云集汇通科技有限公司
            <div class="wel__info-subtitle" style="padding:5px 5px 5px 5px">
              <div style="display:flex;">
                <span style="padding-right:20px;"> 潍坊市寒亭区总部基地45号楼</span>
                <div class="wel__error" @click="excptionClick">
                  <i class="el-icon-bell"></i>
                  <span class="wel__error-title">异常通知
                    <small class="wel__error-num">[ 6 ]</small>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div @click="tagClick" style='padding-left:5px'>
            <el-tag size="medium" type="success">朝气蓬勃</el-tag>
            <el-tag size="medium" type="warning">精兵简政</el-tag>
            <el-tag size="medium" type="danger">欣欣向荣</el-tag>
            <el-tag size="medium" type="danger">高新技术企业</el-tag>
            <el-tag size="medium" type="warning">代发工资</el-tag>
            <!-- <el-tag size="medium" type="success">欣欣向荣</el-tag> -->
            <el-button style="margin-left:50px;" type="primary" plain @click.stop="markingClick">精准营销</el-button>
          </div>
        </div>

      </div>
      <div class="wel__extra">
        <div class="wel__extra-item" @click="box=true">
          <p class="wel__extra-title">
            普惠金融指数
          </p>
          <p class="wel__extra-subtitle">
            67
          </p>
        </div>
        <div class="wel__extra-item" @click="box1=true">
          <p class="wel__extra-title">
            排名
          </p>
          <p class="wel__extra-subtitle" style='cursor:hand'>
            15
            <span>/ 89</span>
          </p>
        </div>
        <div class="wel__extra-item" @click="box2=true">
          <p class="wel__extra-title">
            企业贡献指数
          </p>
          <p class="wel__extra-subtitle">
            38
          </p>
        </div>
        <div class="wel__extra-item" @click="box1=true">
          <p class="wel__extra-title">
            排名
          </p>
          <p class="wel__extra-subtitle">
            15
            <span>/ 89</span>
          </p>
        </div>
      </div>
    </div>
    <el-row :span="24">
      <el-col :span="18">
        <basic-container>
          <avue-data-icons :option="option4"></avue-data-icons>
        </basic-container>
        <basic-container>
          <avue-data-progress :option="option3" style="margin-bottom:20px"></avue-data-progress>
        </basic-container>
      </el-col>
      <el-col :span="6">
        <basic-container>
          <avue-form-detail class="wel__detail" :option="detailOption" v-model="form"></avue-form-detail>
          <!-- <span>法人名称: 法人</span>
          <span>联系方式: 13855686688</span>
          <span>主营项目: 金融咨询</span>
          <span>规模: 50-99人</span>
          <avue-data-icons :option="option2" style=' margin: 10px 30px 50px 30px '></avue-data-icons> -->
          <!-- <div style="text-align:center;">
            <img src='/static/img/detail.png ' alt="查看详情" class="detail" />
            <span style="margin-top:5px; color: rgba(0, 0, 0, 0.45); font-weight:1px">更多信息</span>
          </div> -->
        </basic-container>
      </el-col>
    </el-row>
    <basic-container>
      <span class="avue-title">能耗信息</span>
      <div class="row row ">
        <avue-data-tabs :option="powerOption"></avue-data-tabs>
      </div>
    </basic-container>
    <basic-container>
      <span class="avue-title">经营环境</span>
      <div class="row row ">
        <avue-data-tabs :option="thsOption"></avue-data-tabs>
      </div>
    </basic-container>
    <basic-container>
      <span class="avue-title">视频监控</span>
      <div class="row row ">
        <avue-data-tabs :option="vedioOption"></avue-data-tabs>
      </div>
    </basic-container>
    <basic-container>
      <el-dialog title="企业详情" width="800px" :visible.sync="enterVisible" :close-on-click-modal="false">
      </el-dialog>
    </basic-container>
    <el-dialog title="普惠金融指数" :visible.sync="box" width="85%">
      <avue-crud :option="pujr" :data="pujrData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="企业贡献指数" :visible.sync="box2" width="85%">
      <avue-crud :option="gxd" :data="gxdData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="排名" :visible.sync="box1" width="70%">
      <avue-crud :option="option7" :data="data3">
      </avue-crud>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pujrData, pujr, gxd, gxdData } from './options.js'
import enter from './report_enter'
export default {
  name: 'wel',
  components: {
    enter
  },
  data() {
    return {
      pujrData: pujrData,
      pujr: pujr,
      gxd: gxd,
      gxdData: gxdData,
      box: false,
      box1: false,
      box2: false,
      form: {
        qhdh: '刘金发',
        zt: '13836866688',
        xsdh: '金融科技',
        zdd: '69 人',
        zczj: '2000 万元'
      },
      option7: {
        index: true,
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        header: false,
        align: 'center',
        column: [
          {
            label: '公司名称',
            prop: 'name'
          },
          {
            label: '在职员工',
            prop: 'yg'
          },
          {
            label: '普惠金融指数',
            prop: 'zs'
          },
          {
            label: '排名',
            prop: 'phpm'
          },
          {
            label: '企业贡献度',
            prop: 'gxd'
          },
          {
            label: '排名',
            prop: 'gxdpm'
          }
        ]
      },
      data3: [
        {
          name: '北京云集汇通科技有限公司',
          yg: 69,
          qy: 169,
          zh: '高新支行',
          zs: 76,
          gxd: 68,
          phpm: 1,
          gxdpm: 2
        },
        {
          name: '潍坊之恋婚纱摄影',
          yg: 19,
          qy: 131,
          zh: '寒亭支行',
          zs: 67,
          gxd: 72,
          phpm: 2,
          gxdpm: 1
        },
        {
          name: '潍坊置业鞋厂',
          yg: 293,
          qy: 20,
          zh: '奎文支行',
          zs: 56,
          gxd: 42,
          phpm: 3,
          gxdpm: 3
        }
      ],

      detailOption: {
        option: [
          {
            label: '企业资料',
            prop: 'tksq',
            icon: 'el-icon-view',
            column: [
              {
                label: '法定代表人',
                prop: 'qhdh',
                span: 12
              },
              {
                label: '行业分类',
                prop: 'xsdh',
                span: 12
              },
              {
                label: '在职员工',
                prop: 'zdd',
                span: 12
              },
              {
                label: '注册资本',
                prop: 'zczj',
                span: 12
              },
              {
                label: '联系方式',
                prop: 'zt',
                span: 24
              }
            ]
          }
        ]
      },
      data5: [
        {
          name: '奎文区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '高新区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '潍城区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '寒亭区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '坊子区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '潍城区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '寒亭区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        },
        {
          name: '坊子区',
          phjrzs: 100,
          qygx: 120,
          zhyw: 120
        }
      ],
      enterVisible: false,
      list: [],
      thsList: [],
      vedioList: [],

      option4: {
        discount: true,
        data: [
          {
            title: '企业贷款',
            count: '50 / 100',
            icon: 'icon-weituodaikuanhuankuan'
          },
          {
            title: '随薪贷',
            count: '30 / 290 / 15',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '存款日均',
            count: '68 / 120',
            icon: 'icon-cunkuan_o'
          },
          // {
          //   title: '存款归行率(%)',
          //   count: 35,
          //   icon: 'icon-ziyuanldpi'
          // },
          {
            title: '代发工资',
            count: '69 / 69',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '手机银行开户数',
            count: '36 / 69',
            icon: 'icon-shouji'
          },
          {
            title: '分析报告',
            icon: 'icon-group53',
            href: '/#/report/report_enter',
            count: 4
          }
        ]
      },
      data: [
        {
          rw: '这是一条工作任务',
          nr: '这是一条很长很长很长很长很长很长很长很长很长的工作内容',
          sj: '2019-01-01'
        },
        {
          rw: '这是一条工作任务',
          nr: '这是一条很长很长很长很长很长很长很长很长很长的工作内容',
          sj: '2019-01-01'
        },
        {
          rw: '这是一条工作任务',
          nr: '这是一条很长很长很长很长很长很长很长很长很长的工作内容',
          sj: '2019-01-01'
        },
        {
          rw: '这是一条工作任务',
          nr: '这是一条很长很长很长很长很长很长很长很长很长的工作内容',
          sj: '2019-01-01'
        }
      ],
      option3: {
        data: [
          {
            title: '产能饱和度(增长12%)',
            color: 'rgb(180, 238, 23)',
            count: 102,
            href:
              '/#/report/capacity_power?deviceId=00013479000000013492&powerId=00001&powerName=产能分析&name=产能'
          },
          {
            title: '出勤率（当月）',
            color: 'rgb(100,149,237)',
            count: 95
          },
          {
            title: '人员流失率（年均）',
            color: 'rgb(230, 71, 88)',
            count: 18
          }
        ]
      },
      option2: {
        discount: true,
        span: 12,
        data: [
          {
            title: '企业详情',
            icon: 'el-icon-tickets',
            click: () => {
              console.log(1)
              this.enterVisible = true
            }
          },
          {
            title: '数据分析',
            icon: 'el-icon-upload',
            href: '/#/report/report_enter'
          }
        ]
      },
      option1: {
        span: 6,
        data: [
          {
            title: '我的园区',
            count: 33,
            icon: 'el-icon-view',
            color: 'rgb(49, 180, 141)',
            href: '/#/data/park'
          },
          {
            title: '我的企业',
            count: 186,
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
            href: '#/data/company'
          },
          {
            title: '异常通知',
            count: 3,
            icon: 'el-icon-warning',
            color: 'rgb(230, 71, 88)',
            href: '/#/zhgl/report_worning_park'
          },
          {
            title: '代办事项',
            count: 12,
            icon: 'icon-shujuzhanshi2',
            color: 'rgb(117, 56, 199)',
            href: 'https://avue.top',
            target: '_blank'
          }
        ]
      },
      option: {
        span: 8,
        data: [
          {
            title: '寒亭区',
            subtitle: '截止到今日',
            count: 7993,
            allcount: 10222,
            text: '普惠金融指数',
            color: 'rgb(27, 201, 142)',
            key: '寒'
          },
          {
            title: '高新区',
            subtitle: '截止到今日',
            count: 3112,
            allcount: 10222,
            text: '普惠金融指数',
            color: 'rgb(230, 71, 88)',
            key: '高'
          },
          {
            title: '奎文区',
            subtitle: '截止到今日',
            count: 908,
            allcount: 10222,
            text: '普惠金融指数',
            color: 'rgb(56, 161, 242)',
            key: '奎'
          }
        ]
      }
    }
  },
  computed: {
    powerOption() {
      let data = []
      this.list.forEach(ele => {
        console.log(ele)
        data.push({
          title: ele.powerName,
          subtitle: '本年用' + ele.key,
          count: ele.power,
          allcount: ele.minPower,
          text: ele.maxPower,
          color: ele.color,
          key: ele.key,
          href: ele.url
        })
      })
      return {
        span: 6,
        data: data
      }
    },
    thsOption() {
      let data = []
      this.thsList.forEach(ele => {
        data.push({
          title: ele.powerName,
          subtitle: '截止到今日',
          count: ele.power,
          allcount: ele.minPower,
          text: ele.maxPower,
          color: ele.color,
          key: ele.key,
          href: ele.url
        })
      })
      return {
        span: 6,
        data: data
      }
    },
    vedioOption() {
      let data = []
      this.vedioList.forEach(ele => {
        console.log(ele)
        data.push({
          title: ele.powerName,
          //subtitle: '截止到今日',
          count: ele.power,
          allcount: ele.minPower,
          text: ele.maxPower,
          color: ele.color,
          key: ele.key,
          href: ele.url
        })
      })
      return {
        span: 6,
        data: data
      }
    },
    ...mapGetters(['userInfo'])
  },
  created() {
    ;(this.vedioList = [
      {
        powerName: '视频监控',
        power: '　　大门视频',
        color: '#5c0dde',
        deviceId: '00013479000000013492',
        powerId: '00001',
        key: '影',
        url: `/#/myiframe/urlPath?name=大门视频&src=https://canvas.avue.top/vedio.html`
      },
      {
        powerName: '视频监控',
        power: '　　一楼视频',
        color: '#770cb0',
        deviceId: '00013479000000013492',
        powerId: '00001',
        key: '影',
        url: `/#/myiframe/urlPath?name=一楼视频&src=https://canvas.avue.top/vedio.html`
      }
    ]),
      (this.thsList = [
        {
          powerName: '温度（℃）',
          power: 22.5 + ' ℃',
          color: '#f8bb30',
          minPower: '本日最高温度：' + 29.5,
          maxPower: '本日最低温度：' + 18.3,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '温',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=温度&name=温度`
        },
        {
          powerName: '湿度（RH）',
          power: 38.9 + '%',
          color: '#12ade2',
          minPower: '本日最高湿度：' + 42.8,
          maxPower: '本日最低湿度：' + 28.9,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '湿',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=湿度（RH）&name=湿度`
        },
        {
          powerName: '空气质量指数(μg/m2)',
          power: 138.9 + 'μg/m2',
          color: '#218bed',
          minPower: '本日最高指数：' + 242.3,
          maxPower: '本日最低指数：' + 103.5,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '空',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=空气质量指数&name=指数`
        }
      ]),
      (this.list = [
        {
          powerName: '总电表',
          power: 1072.5 + ' °',
          color: 'green',
          minPower: '上年日均：' + 390,
          maxPower: '本月日均：' + 410,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '电',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=总电表&name=用电量`
        },
        {
          powerName: '水表',
          power: 369.14 + ' m³',
          color: '#6612e2',
          minPower: '上年日均：' + 8900,
          maxPower: '本月日均：' + 13524,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '水',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=水表&name=用水量`
        },
        {
          powerName: '燃气表',
          power: 369.14 + ' m³',
          color: 'red',
          minPower: '上年日均：' + 396,
          maxPower: '本月日均：' + 463,
          deviceId: '00013479000000013492',
          powerId: '00001',
          key: '气',
          url: `/#/report/capacity_power?deviceId=00013479000000013492
             &powerId=00001&powerName=总水表&name=用气量`
        }

        // {
        //   powerName: '地暖电表',
        //   power: 216 + ' °',
        //   color: 'e9e42b',
        //   minPower: '上年日均：' + 9876,
        //   maxPower: '本月日均：' + 153692,
        //   deviceId: '00013479000000013492',
        //   powerId: '00001',
        //   key: '电',
        //   url: `/#/report/capacity_power?deviceId=00013479000000013492
        //      &powerId=00001&powerName=地暖电表&name=用电量`
        // }
      ])
  },
  methods: {
    tagClick() {
      this.$notify({
        title: '我是标签',
        message: '点我干嘛！',
        type: 'success',
        duration: 2000
      })
    },
    excptionClick() {
      this.$router.push({ path: '/zhgl/report_worning_park' })
    },
    markingClick() {
      this.$router.push({ path: '/zhgl/report_marketing_park' })
    }
  }
}
</script>

<style  lang="scss">
.detail {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  margin-bottom: 5px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__detail {
    font-size: 14px;
    color: #ccc;
    .avue-form-detail__header {
      display: none;
    }
    .avue-form-detail__item {
      padding: 5px 0;
    }
    .avue-form-detail__content {
      display: block;
      font-weight: 600;
      color: #333;
      font-size: 18px;
    }
    .avue-form-detail__label {
      display: block;
      margin-bottom: 12px;
    }
  }
  &__error {
    color: #666;
    display: flex;
    align-items: center;
    cursor: pointer;
    i {
      position: relative;
      margin-right: 4px;
      font-size: 20px;
      color: #409eff;
      &::after {
        position: absolute;
        content: '';
        background-color: red;
        width: 6px;
        height: 6px;
        right: -3px;
        top: -6px;
        border-radius: 100%;
      }
    }
    &-num {
      color: #409eff;
    }
    &-title {
      font-size: 13px;
    }
  }
  &__info {
    display: flex;
    align-items: center;
    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
    &-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
    &-subtitle {
      cursor: pointer;
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }
  &__extra {
    &-item {
      position: relative;
      padding: 0 20px;
      display: inline-block;
      text-align: center;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: '';
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      cursor: pointer;
      margin: 0;
      padding-left: 5px;
      text-align: center;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}
</style>